import { Component } from "react";
import { View } from "@tarojs/components";
import PropTypes from "prop-types";
import "./index.scss";
/**
 * 组件说明-Step步骤条
 * @export
 * @class ReserveCard
 * @extends Component
 * const items = [
	{
		title: {
			value: "检测下单",
			size: "12"
		},
		icon: {
			activeColor: "#0f3299",
			inactiveBK: "#fff",
			inactiveColor: "#EDEDF0",
			circleSize: "18"
		}
	},
 */
export default class Step extends Component {
	static propTypes = {
		items: PropTypes.array,
		itemWrapStyle: PropTypes.object,
		itemStyle: PropTypes.object,
		current: PropTypes.number,
		circleLeft: PropTypes.number //圈左侧线距离圈 距离
	};
	static defaultProps = {
		items: [],
		itemWrapStyle: {},
		itemStyle: {},
		current: 0,
		circleLeft: 15
	};

	render() {
		const { current, items, itemStyle, itemWrapStyle, circleLeft } = this.props;
		const lastItem = items[items.length - 1];
		return (
			<View className='step_wrap' style={{ ...itemWrapStyle }}>
				<View className='step_root'>
					{items &&
						items.length > 0 &&
						items.map((subitem, subindex) => {
							if (subindex !== items.length - 1) {
								return (
									<View className='step_item' key={subindex} style={{ ...itemStyle }}>
										<View className='step_top'>
											<View
												className='step_left'
												style={{
													width: `${circleLeft}px`,
													background:
														subindex !== 0
															? subindex < current || subindex === current
																? subitem.icon.activeColor
																: subitem.icon.inactiveColor
															: "transparent",
													top: `${subitem.icon.circleSize / 2 - 1}px`
												}}></View>

											<View
												className={`step_icon ${subindex < current ? "step_check" : ""}`}
												style={{
													height: subitem.icon.circleSize + "px",
													width: subitem.icon.circleSize + "px",
													background:
														subindex < current
															? subitem.icon.activeColor
															: subitem.icon.inactiveBK,
													borderColor:
														subindex < current || subindex === current
															? subitem.icon.activeColor
															: subitem.icon.inactiveColor
												}}></View>

											<View
												className='step_right'
												style={{
													background:
														subindex < current
															? subitem.icon.activeColor
															: subitem.icon.inactiveColor,
													top: `${subitem.icon.circleSize / 2 - 1}px`
												}}></View>
										</View>
										<View
											className='step_text'
											style={{
												fontSize: subitem.title.size + "px",
												height: subitem.title.size + "px"
											}}>
											{subitem.title.value}
										</View>
									</View>
								);
							} else {
								return (
									<View
										className='step_virtual_view'
										style={{
											width: Number(subitem.icon.circleSize) + Number(circleLeft * 2) + "px"
										}}>
										{lastItem.title.value}
									</View>
								);
							}
						})}
					{items && items.length > 1 ? (
						<View className='lastItem'>
							<View className='step_top'>
								<View
									className='step_right'
									style={{
										background:
											items.length - 1 < current || items.length - 1 === current
												? lastItem.icon.activeColor
												: lastItem.icon.inactiveColor,
										minWidth: `${circleLeft}px`,
										flexBasis: `${circleLeft}px`,
										top: `${lastItem.icon.circleSize / 2 - 1}px`
									}}></View>
								<View
									className={`step_icon ${items.length - 1 < current ? "step_check" : ""}`}
									style={{
										height: lastItem.icon.circleSize + "px",
										width: lastItem.icon.circleSize + "px",
										background:
											items.length - 1 < current
												? lastItem.icon.activeColor
												: lastItem.icon.inactiveBK,
										borderColor:
											items.length - 1 < current || items.length - 1 === current
												? lastItem.icon.activeColor
												: lastItem.icon.inactiveColor
									}}></View>
								<View
									className='step_left'
									style={{
										width: `${circleLeft}px`,
										background: "transparent",

										top: `${lastItem.icon.circleSize / 2 - 1}px`
									}}></View>
							</View>
							<View
								className='step_text'
								style={{
									fontSize: lastItem.title.size + "px",
									height: lastItem.title.size + "px"
								}}>
								{lastItem.title.value}
							</View>
						</View>
					) : null}
				</View>
			</View>
		);
	}
}
